<template>
    <div class="login-container">
        <el-card class="mycard">
            <template #header>
                <div class="card-header">
                    <span>医生登录</span>
                </div>
            </template>
            <el-form :model="form" label-width="auto" style="max-width: 600px;">
                <el-form-item label="医生账号">
                    <el-input v-model="form.docCode" placeholder="请输入医生账号" />
                </el-form-item>
                <el-form-item label="密码" class="password-item">
                    <el-input v-model="form.password" type="password" placeholder="请输入密码" />
                </el-form-item>
                <div class="button-container">
                    <el-button type="primary" @click="onSubmit">登录</el-button>
                    <el-button>取消</el-button>
                </div>
            </el-form>
            <template #footer></template>
        </el-card>
    </div>
</template>





<script>
import { ref, reactive, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
import { setSessionStorage } from '../common'

export default {
    setup() {
        const router = useRouter()

        const state = reactive({
            form: {
                docCode: "",
                password: ""
            }
        })

        function onSubmit() {
            if (state.form.docCode == "" || state.form.password == "") {
                alert("账号或密码未输入请完成输入")
            } else {
                axios.post('/api/login', {
                    docCode: state.form.docCode,
                    password: state.form.password
                })
                    .then(function (response) {
                        console.log(response);
                        //2.对相应结果进行判断
                        if (response.data.status == 200) {
                            alert("登录成功")
                            //将用户数据存储到session
                            setSessionStorage("docter", response.data.data)
                            setSessionStorage("token", response.headers.token)
                            console.log(sessionStorage.getItem("docter"))
                            router.push({name:"OrderList"})
                        } else{
                            
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
            }
        }

        return {
            ...toRefs(state),
            onSubmit
        }
    }
}
</script>

<style scoped>
.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)),
                url('/src/assets/hospital-bg.jpg') center/cover no-repeat;
}

.mycard {
    width: 400px;
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.card-header {
    text-align: center;
    font-size: 24px;
    color: #409EFF;
    font-weight: bold;
    margin-bottom: 20px;
}

.el-form-item {
    margin-bottom: 25px;
}

.password-item {
    margin-bottom: 15px;
}

.el-input {
    border-radius: 8px;
}

.button-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 10px;
}

.el-button {
    width: 120px;
    padding: 12px 0;
    border-radius: 8px;
    font-weight: 600;
}

.el-button--primary {
    background-color: #409EFF;
}

.el-button--primary:hover {
    background-color: #66b1ff;
}
</style>
